<!doctype html>
<html>

<head>
  <title>MBL</title>
  <meta charset="utf-8" />
  <meta name="keywords" content="{{keywords}}" />
  <meta name="description" content="{{description}}" />
  <link rel="shortcut icon" href="../public/img/favicon.png">
  <link href="../public/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="../public/css/reset.css" rel="stylesheet" media="screen">
  <link href="../public/css/theme.css" rel="stylesheet" media="screen">
  <link href="../public/css/nav.css" rel="stylesheet" media="screen">
  <link href="../public/css/slides.css" rel="stylesheet" media="screen">
  <link href="../public/css/layout.css" rel="stylesheet" media="screen">
  <link href="../public/css/home.css" rel="stylesheet" media="screen">
  <link href="../public/css/research_area.css" rel="stylesheet" media="screen">
  <link href="../public/css/intro.css" rel="stylesheet" media="screen">
  <link href="../public/css/research/index.css" rel="stylesheet" media="screen">
  <link href="../public/css/research/detail.css" rel="stylesheet" media="screen">
  <link href="../public/css/news.css" rel="stylesheet" media="screen">
  <link href="../public/css/events.css" rel="stylesheet" media="screen">
  <link href="../public/css/publication.css" rel="stylesheet" media="screen">
  <link href="../public/css/member.css" rel="stylesheet" media="screen">
  <link href="../public/css/contact.css" rel="stylesheet" media="screen">
</head>

<body>
<!-- Fixed navbar -->
<div class="theme-color mbl-nav navbar-fixed-top">
  <div class="wrapper full-height">
    <!--<a class="logo-wrapper" href="/">-->
    <!--<img class="logo" src="../../public/img/logo.png" alt="MBL">-->
    <!--</a>-->
    <a class="img-wrapper" href="/">
      <img class="logo" src="../public/img/logo.png" alt="MBL">
    </a>
    <ul class="menu" id="menu">
      <li><a href="/">Home</a></li>
      <li><a href="/system/go.jsp?treeid=1011&apptype=treetemp&urltype=tree.TreeTempUrl">News</a></li>
      <li><a href="/research">Research</a></li>
      <li><a href="/publication">Publications</a></li>
      <li><a href="/members">Members</a></li>
      <li><a href="/system/go.jsp?treeid=1003&apptype=treetemp&urltype=tree.TreeTempUrl">Contact</a></li>
    </ul>
    <div class="nav-search">
      <div class="input-group search-content">
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Search</button>
          </span>
      </div>
    </div>
  </div>
</div>

<div class="body-wrapper news-layout__wrapper">
  <div class="wrapper">
    <div class="sidebar news-sidebar">
      <span id="intro" class="my-btn sidebar-item pointer">Introduction</span>
      <span id="tan" class="my-btn sidebar-item pointer">Prof.Weihong Tan</span>
      <span id="faculty" class="my-btn sidebar-item pointer">Faculty & Staff</span>
      <span id="fellows" class="my-btn sidebar-item pointer">Postdoctoral Fellows</span>
      <span id="phd" class="my-btn sidebar-item pointer">Ph.D. candidates</span>
      <span id="ms" class="my-btn sidebar-item pointer">M.S. candidates</span>
      <span id="alumni" class="my-btn sidebar-item pointer">Alumni</span>
    </div>

    <div class="main" id="lab-intro">
      <h1 class="lab-intro">Introduction</h1>
      <p class="lab-intro__text">The tan research group focuses mainly on molecular sciences and biomedicines. We aim to apply new molecular technologies and new materials for biomedical studies. We are committed to develop DNA based molecular devices in energy reation and molecular movement. We work hard and always have fun!</p>
      <p class="lab-intro__text">The tan research group focuses mainly on molecular sciences and biomedicines. We aim to apply new molecular technologies and new materials for biomedical studies. We are committed to develop DNA based molecular devices in energy reation and molecular movement. We work hard and always have fun!</p>
      <img class="lab-intro__img" src="../public/img/member_intro.png" alt="">
    </div>
    <div class="main" id="lab-person__intro">
      <div class="person-info__wrapper border-bottom-line">
        <div class="item person-info">
          <img id="teacher-img" src="../public/img/tan_info.jpg" alt="">
          <h2>Address</h2>
          <p id="teacher-address"></p>
          <h2>Contact Information</h2>
          <!--<p>tan@hnu.edu.cn</p>-->
          <p id="teacher-contact"></p>
        </div>
        <div class="person-desc">
          <div class="desc-basic">
            <h1 id="teacher-name">Prof.{{ pageData.teachername }}</h1>
            <!--<p id="teacher-desc">test test test test test test test test test test test test test test</p>-->
          </div>
          <div class="desc-subject">
            <h1>Biography</h1>
            <!--<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>-->
            <p id="teacher-biography">{{ pageData.biography }}</p>
          </div>
        </div>
      </div>
      <div class="person-education border-bottom-line">
        <h2 class="person-item__title">Education</h2>
        <!-- timeline -->
        <div class="timeline">
          <div class="timeline-body">
            <ul class="timeline-ul" id="education-timeline">
              <!--{% for education in pageData.educations %}-->
              <!--<li>-->
                <!--<div class="timeline-bullet"></div>-->
                <!--<span class="timeline-item__time">{{ education.year }}</span>-->
                <!--<span class="timeline-item__title">{{ education.degree }}</span>-->
                <!--<p class="timeline-item__txt">{{ education.school }}</p>-->
              <!--</li>-->
              <!--{% endfor %}-->

              <!--<li>-->
              <!--<div class="timeline-bullet"></div>-->
              <!--<span class="timeline-item__time">1993</span>-->
              <!--<span class="timeline-item__title">Ph.D</span>-->
              <!--<p class="timeline-item__txt">University of Michigan</p>-->
              <!--</li>-->
            </ul>
          </div>
        </div>
      </div>
      <div class="person-research border-bottom-line">
        <h2 class="person-item__title">Research Interest</h2>
        <!--<p>Biography chemistry, Biography chemistry, Biography chemistry, Biography chemistry, Biography chemistry,</p>-->
        <p id="teacher-interest">{{pageData.interest}}</p>
      </div>
      <div class="person-publication border-bottom-line">
        <h2 class="person-item__title" id="teacher-publication">Selected Publications</h2>
        <!--{% for article in pageData.articles %}-->
        <!--<section class="publication-item">-->
          <!--<h3>{{ article.title }}</h3>-->
          <!--<p>{{ article.name }}</p>-->
          <!--<p>Nature Comunication: DOI: <span class="mark">10.714/thno.38261</span></p>-->
        <!--</section>-->
        <!--{% else %}-->
        <!--<p>暂无。。。</p>-->
        <!--{% endfor %}-->
      </div>
      <div class="person-awards border-bottom-line">
        <h2 class="person-item__title">Awards and Prizes</h2>
        <!-- timeline -->
        <div class="timeline">
          <div class="timeline-body">
            <ul class="timeline-ul" id="teacher-awards">
              <!--awards-->
              <!--{% for award in pageData.awards %}-->
              <!--<li>-->
                <!--<div class="timeline-bullet"></div>-->
                <!--<span class="timeline-item__time">{{ award.year }}</span>-->
                <!--<p class="timeline-item__txt">{{ award.award }}</p>-->
              <!--</li>-->
              <!--{% endfor %}-->
              <!--<li>-->
              <!--<div class="timeline-bullet"></div>-->
              <!--<span class="timeline-item__time">1993</span>-->
              <!--<p class="timeline-item__txt">the Associate Editor of Analytical Chemistry </p>-->
              <!--</li>-->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="main" id="lab-staff">
      <div class="staff-wrapper" id="staff-wrapper">
        <!--{% for teacher in pageData.rows %}-->
        <!--<a href="/faculty_staff?id={{ teacher.teacherid }}">-->
          <!--<div class="staff">-->
            <!--<img src="{{teacher.picture | default('../public/img/member_intro.png', true)}}" alt="">-->
            <!--<p class="staff-name">{{ teacher.teachername }}</p>-->
            <!--&lt;!&ndash; 疑问 &ndash;&gt;-->
            <!--<span class="staff-position">{{ teacher.role }}</span>-->
          <!--</div>-->
        <!--</a>-->
        <!--{% endfor %}-->

        <!--<div class="staff">-->
        <!--<img src="../public/img/member_intro.png" alt="">-->
        <!--<span class="staff-name">John Smith</span>-->
        <!--<span class="staff-position">Creative Director</span>-->
        <!--</div>-->
      </div>
    </div>
    <div class="main" id="lab-phd">
      <!--{% for year in years %}-->
      <!--<div class="phd-year border-bottom-line">-->
        <!--<h2>{{ year }}</h2>-->
        <!--<div class="phds">-->
          <!--{% for students in pageData.rows %}-->
          <!--{% if students.year === year %}-->
          <!--<span class="phd-name">{{students.studentname}}</span>-->
          <!--{% endif %}-->
          <!--{% endfor %}-->
        <!--</div>-->
      <!--</div>-->
      <!--{% endfor %}-->
    </div>
    <div class="main" id="lab-ms">
      <!--{% for year in years %}-->
      <!--<div class="phd-year border-bottom-line">-->
      <!--<h2>{{ year }}</h2>-->
      <!--<div class="phds">-->
      <!--{% for students in pageData.rows %}-->
      <!--{% if students.year === year %}-->
      <!--<span class="phd-name">{{students.studentname}}</span>-->
      <!--{% endif %}-->
      <!--{% endfor %}-->
      <!--</div>-->
      <!--</div>-->
      <!--{% endfor %}-->
    </div>
  </div>

</div>

<footer class="footer theme-color">
  <div class="wrapper footer-container">
    <a href="/system/go.jsp?treeid=1003&apptype=treetemp&urltype=tree.TreeTempUrl">
      <div class="map-wrapper">
        <!--<div id="map"></div>-->
        <img src="../public/img/map.png" alt="">
        <p>Lushan South Road Yifu Building, Hunan University South Campus, Changsha, Hunan China</p>
      </div>
    </a>
    <div class="logos">
      <div class="show-logos">
        <img class="hnu-logo" src="../public/img/hnu.png" alt="">
        <img class="mbl-logo" src="../public/img/mbl.png" alt="">
      </div>

      <a href="/system/go.jsp?treeid=1003&apptype=treetemp&urltype=tree.TreeTempUrl">
        <div class="contact-logos">
          <img src="../public/img/phone.svg" alt="">
          <img src="../public/img/fox.svg" alt="">
          <img src="../public/img/weixin.svg" alt="">
          <img src="../public/img/email.svg" alt="">
        </div>
      </a>
    </div>
    <div class="links">
      <h2>HELPFUL LINKS</h2>
      <ul class="links-list">
        <li><a href="">Hunan University</a></li>
        <li><a href="">Hunan University</a></li>
        <li><a href="">Hunan University</a></li>
        <li><a href="">Hunan University</a></li>
      </ul>
    </div>
  </div>
</footer>

<script src="../public/js/nav.js"></script>
<script src="../public/js/jquery.min.js"></script>
<script src="../public/js/members.js"></script>
<!--<script src="../public/js/switch_event_new.js"></script>-->
</body>

</html>
